/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* entity */
import CustomerTag from '@model/entity/CustomerTag'
/* scss */
import '@src/component/common/BaseTags/BaseTags.scss'
/* utils */
import { createNamespace } from '@src/util'
import { CreateElement } from 'vue'
import { uuid } from 'pub-bbx-utils'
import { ScopedSlot } from 'vue/types/vnode'
import { isArray, isFunction } from '@src/util/type'

const [createComponent, bem] = createNamespace(ComponentNameEnum.BaseTags)

export enum BaseTagsTypeEnum {
  Text = 'text',
}


export type BaseTagsProps = {
  type: BaseTagsTypeEnum,
  value: CustomerTag[]
}

const BaseTagsType = {
  [BaseTagsTypeEnum.Text]: BaseTagsTypeEnum.Text
}

function BaseTags(h: CreateElement, props: BaseTagsProps, slots: Record<string, ScopedSlot | undefined | Function>) {
  if (!isArray(props.value)) return null
  
  let classNames: string[] = [
    ComponentNameEnum.BaseTags, 
    `${ComponentNameEnum.BaseTags}-${BaseTagsType[props.type] || ''}`
  ]
  let defaultSlot = slots.default
  
  if (isFunction(slots.default)) {
    const slotDefaultFunction = slots.default as Function
    defaultSlot = slotDefaultFunction()
  }
  
  return (
    <div class={classNames}>
      {
        props.value.map((customerTag: CustomerTag) => {
          return (
            <el-tag key={uuid()} disable-transitions type='info'>
              {customerTag.tagName}
            </el-tag>
          )
        })
      }
      { defaultSlot }
    </div>
  )
}

BaseTags.props = {
  value: {
    type: Array,
    default: () => []
  },
  type: {
    type: String,
    default: ''
  }
}

export default createComponent<BaseTagsProps>(BaseTags)